import React from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import './index.css'
const List: React.FC = () => {
  const navigate = useNavigate()
  const colors: string[] = ['red', 'gold', 'green', 'aqua', '#ccc', 'salmon', 'yellow', 'pink']
  const getAxiosList = async (color:string) => {
    const resp = await axios.get('/api/lists',{params:{color:color}})
    const {code}=resp.data
    if(code===200){
      navigate('/')
    }
  }
  return (
    <div className='list'>
      <div className='list-nav'>全部颜色</div>
      <div className='list-main'>
        {
          colors.map((v, i) => {
            return <div key={i} className="list-main-item" style={{background:v}} onClick={()=>getAxiosList(v)}>{v}</div>
          })
        }
      </div>
    </div>
  )
}

export default List